<template>
    <!-- 车辆管理-维修保养记录 -->
    <div class="mainContent">
        <div class="search" style="padding-bottom: 20px;">
            <div class="left">
                <div class="list" style="margin: 0">
                    <span style="width: 120px">维修保养时间：</span>
                    <Date-picker
                        :value="value"
                        format="yyyy-MM-dd"
                        type="daterange"
                        placement="bottom-end"
                        placeholder="选择日期"
                        :clearable="false"
                        style="width:240px;margin-right:20px"
                        :options = "options"
                        @on-change="getDate">
                    </Date-picker>
                    <Input search enter-button placeholder="请输入设备类型，编号" class="radiusBorder" style="width:220px" @on-search="onSecach" @on-enter="onSecach" v-model="keyword" clearable />
                    <input type="password" autocomplete="new-password" style="display: none" />
                </div>
            </div>
            <div class="right" style="margin: 0">
                <el-button type="primary" size="small" plain @click="addRow" style="margin-right: 20px" :disabled="!btnList.includes('mach/maintain/record/add')">+维修保养记录</el-button>
                <el-dropdown split-button size="small" @click="handleClick" v-if="btnList.includes('mach/maintain/record/exp')">
                    数据导出
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="goEXP">导出记录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
        <div class="tabBox">
            <div class="tableList">
                <el-table :data="list" :stripe="true">
                    <el-table-column prop="machCode" label="设备编号" align="center"></el-table-column>
                    <el-table-column prop="machTypeName" label="设备类型" align="center"></el-table-column>
                    <el-table-column prop="itemList" label="维修保养项目" align="center" width="230px">
                        <template slot-scope="scope">
                            <span v-for="(item,index) in scope.row.itemList" :key="index" style="margin-right:10px">{{ item.itemName }} <em v-if="index !=scope.row.itemList.length-1">、</em></span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="维修保养费用" align="center">
                        <el-table-column  :label="item.name" align="center" v-for="(item,index) in payList" :key="index">
                            <template slot-scope="scope">
                                <span style="margin-right:10px">{{ scope.row.payList[index] }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column> -->
                    <!-- <el-table-column prop="payTotal" label="费用小计" align="center"></el-table-column> -->
                    <el-table-column prop="maintainUserName" label="保养人" align="center"></el-table-column>
                    <el-table-column prop="maintainDate" label="保养日期" align="center"></el-table-column>
                    <el-table-column fixed="right" label="操作" align="center" >
                        <template slot-scope="scope">
                            <el-button @click.native.prevent="getDetails( scope.$index, list)" type="text" size="small" v-preventReClick="1500" style="color:#1891FF;">查看详情</el-button>
                            <el-button @click.native.prevent="removeRow( scope.$index, list)" type="text" v-if="btnList.includes('mach/maintain/record/del')" size="small" v-preventReClick="1500" style="color:red;">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="clearfix"  >
                <div class="float-right">
                    <Page v-if="totalCount" style="margin: 20px 0;text-align: center;" :current.sync="current" :total="totalCount" :page-size="pageSize" show-elevator show-total @on-change="pageChange"></Page>
                </div>
            </div>
        </div>

        <Modal v-model="delModal" title="删除" width="360px;" :mask-closable="false">
            <div style="margin:10px">确定要删除这条数据吗？</div>
            <div slot="footer">
                <el-button @click="cancel(0)" type="info" size="small" plain>取消</el-button>
                <el-button @click="del" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>

        <Modal v-model="addModal" title="添加维修保养记录" width="800px;" :mask-closable="false" class-name='detailsModal'>
            <div class="keep">
                <div class="title">
                    <h2>
                        <span class="bc"></span>
                        <span>设备信息</span>
                    </h2>
                </div>
                <div class="keep_list" style="margin-bottom: 10px">
                    <div class="keep_item">
                        <span class="tip">*</span>
                        <span>维修保养设备:</span>
                        <Select v-model="machId" style="width:250px;" placeholder="请选择维保设备" filterable>
                            <Option v-for="item in machList" :value="item.machId" :key="item.machId">{{item.machTypeName}}-{{item.machCode}}</Option>
                        </Select>
                    </div>
                </div>
                <div class="title">
                    <h2 style="position: relative">
                        <span class="bc"></span>
                        <span class="tip" style="color: red; position: absolute;top:-2px;left: 10px">*</span>
                        <span>工作数据</span>
                    </h2>
                </div>
                <div class="keep_list">
                    <div class="keep_item">
                        <span>工作里程:</span>
                        <Input v-model="workMile" placeholder="请输入工作里程" style="width: 230px;" clearable />
                        <span style="width: 20px;text-align: center">km</span>
                    </div>
                    <div class="keep_item">
                        <span>工作小时:</span>
                        <Input v-model="workHour" placeholder="请输入工作小时" style="width: 230px;" clearable />
                        <span style="width: 20px;text-align: center">h</span>
                    </div>
                </div>
                <div class="title">
                    <h2>
                        <span class="bc"></span>
                        <span>维修保养信息</span>
                    </h2>
                </div>
                <div class="keep_list">
                    <div class="keep_item">
                        <span class="tip">*</span>
                        <span>维修保养日期:</span>
                        <DatePicker
                            transfer
                            type="date"
                            placeholder="请选择日期"
                            style="width:250px"
                            format="yyyy-MM-dd"
                            :options="options"
                            v-model="maintainDate"
                            :clearable="false">
                        </DatePicker>
                    </div>
                </div>

                <div class="keep_tag">
                    <span class="tip">*</span>
                    <span>维修保养项目:</span>
                    <div class="item_tag">
                        <el-checkbox-group v-model="checkedItemList" >
                            <el-checkbox v-for="(item,index) in itemList" :label="item.id" :key="index" style="width: 100px; ">{{item.name}}</el-checkbox>
                        </el-checkbox-group>
                    </div>
                </div>
                <!-- <div class="keep_tag">
                    <span class="tip">*</span>
                    <span>维修保养费用:</span>
                    <div class="item_tag">
                          <el-tabs v-model="activeName" style="width: 100%;">
                            <el-tab-pane v-for="(item,index) in payList" :label="item.name +'('+ payNumList[index] + '元'+')'" :name="item.code" :key="index">
                                 <div style="width: 100%; display: flex;justify-content: space-between;align-items: center">
                                     <div>
                                         <span>计费方式:</span>
                                         <el-radio v-model="radio" label="1" v-if="item.flag">明细汇总</el-radio>
                                         <el-radio v-model="radio" label="2">人工汇总</el-radio>
                                     </div>
                                     <el-button type="primary" size="mini" plain v-if="item.flag&&radio == 1" @click="addRemark(index)">添加明细</el-button>
                                 </div>
                                <div style="margin-top: 10px">
                                    <div v-if="radio == 1">
                                        <div v-if="numMap[index].length>0" class="table" style="width: 100%; height: auto">
                                            <p style="width: 100%; display: flex; justify-content: space-between" align="center">
                                                <span v-for="(val,i) in payList[index].details" :key="i" :style="{width:(100/(payList[index].details.length +1))+ '%'}">{{val}}</span>
                                                <span :style="{width:(100/(payList[index].details.length +1)) + '%'}">操作</span>
                                            </p>
                                            <ul style="width: 100%; list-style: none;margin-top: 10px">
                                                <li v-for="(arr,j) in numMap[index]" :key="j" style="width: 100%; display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px">
                                                    <span v-for="(s,x) in arr" :key="x" style="display: flex;justify-content: center;align-items: center" :style="{width:(100/(arr.length +1)) + '%'}">
                                                        <Input v-model="numMap[index][j][x]" placeholder="请输入" style="width: 60px;" :disabled="x == arr.length-2" @on-change="changeInput" clearable />
                                                    </span>
                                                    <span style="color: red;cursor: pointer;text-align: center" :style="{width:(100/(arr.length +1)) +'%'}" @click="removeRemark(index,j)">删除</span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div v-if="radio == 2">
                                        <el-input-number v-model="payNumList[index]" controls-position="right"   :min="0" :max="999999999" style="width: 120px;"></el-input-number>元
                                    </div>
                                </div>
                            </el-tab-pane>
                          </el-tabs>
                    </div>
                </div> -->
                <div class="keep_tag">
                    <span class="tip">*</span>
                    <span>维修保养说明:</span>
                    <el-input
                        type="textarea"
                        :rows="2"
                        maxlength="200"
                        placeholder="请输入维修保养说明"
                        v-model="maintainRemark" style="width: 650px;">
                    </el-input>
                </div>
                <div class="keep_tag">
                    <span class="tip">*</span>
                    <span>维修保养过程:</span>
                    <el-upload
                        class="upload-demo"
                        :action="uploadUrl"
                        :data="docData"
                        :before-upload="beforeFile"
                        :on-success="docSuccess"
                        :on-error="docError"
                        :on-progress="doProgress"
                        :show-file-list="false"
                        multiple
                        :limit="15"
                        style="margin-left: 10px;width:100%">
                        <el-button style="width:100%" :disabled="percentage != 0" type="primary" >支持格式：图片、视频<i class="el-icon-upload el-icon--right"></i></el-button>
                    </el-upload>
                </div>
                <el-progress style="margin-top:10px" v-if="percentage != 0"   :show-text="true" :text-inside="true" :stroke-width="15" :percentage="percentage" status="success" :format="format"></el-progress>
                <div class="keep_list" style="width: 100%;height: auto;margin-top:15px" >
                    <div class="keep_item" style="width: 100%;height: auto;align-items: flex-start">
                        <span></span>
                        <div style="width: 650px; height: auto">
                            <ul class="ulbox">
                                <li v-for="(item,index) in fileList" :key="index" class="libox" >
                                    <i class="el-icon-circle-close" @click="removeFile(item,index)"></i>
                                    <el-image :src="item" style="display:block;width:150px;height:150px;" v-if="(item).includes('jpg') || (item).includes('png') || (item).includes('jpeg')" :preview-src-list="[item]" ></el-image>
                                    <video :src="item" v-if="(item).includes('mp4')" controls="controls"></video>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="cancel(1)" type="info" size="small" plain>取消</el-button>
                <el-button @click="submitAll" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>

        <Modal v-model="detailsModal" :title="!isAdd?'维修记录保养详情':'编辑维修保养记录'" width="800px;" :mask-closable="false" class-name='detailsModal'>
            <div class="keep" v-if="!isAdd">
                <div class="title">
                    <h2>
                        <span class="bc"></span>
                        <span>设备信息</span>
                        <i class="el-icon-edit edit" @click="edit_btn"  v-if="btnList.includes('mach/maintain/record/edit')"></i>
                    </h2>
                </div>
                <div class="keep_list" style="width: 100%;">
                    <div class="keep_item" style="width: 100%;">
                        <span>设备名称:</span>
                        <p>{{machTypeName}}</p>
                    </div>
                </div>
                <div class="keep_list" style="margin-bottom: 10px;width: 100%">
                    <div class="keep_item" style="width: 100%;">
                        <span>设备编号:</span>
                        <p>{{machCode}}</p>
                    </div>
                </div>
                <div class="title">
                    <h2>
                        <span class="bc"></span>
                        <span>工作数据</span>
                    </h2>
                </div>
                <div class="keep_list" >
                    <div class="keep_item" style="width: 100%;">
                        <span>工作里程:</span>
                        <p>{{workMile?workMile +'KM' :'-'}}</p>
                    </div>
                </div>
                <div class="keep_list" style="width: 100%" >
                    <div class="keep_item" style="width: 100%;">
                        <span>工作小时:</span>
                        <p>{{workHour?workHour + 'h':'-'}}</p>
                    </div>
                </div>
                <div class="title">
                    <h2>
                        <span class="bc"></span>
                        <span>维修保养信息</span>
                    </h2>
                </div>
                <div class="keep_list" >
                    <div class="keep_item" style="width: 100%;">
                        <span>保养人:</span>
                        <p>{{maintainUserName}}</p>
                    </div>
                </div>
                <div class="keep_list" style="width: 100%">
                    <div class="keep_item" style="width: 100%;">
                        <span>保养日期:</span>
                        <p>{{date}}</p>
                    </div>
                </div>

                <div class="keep_list" style="width: 100%" >
                    <div class="keep_item" style="width: 100%;">
                        <span>维修保养项目:</span>
                        <p >
                            <span v-for="(item,index) in itemPrjList" :key="index" style="width:auto">{{item.itemName}} <em v-if="index != itemPrjList.length -1">、</em></span>
                        </p>
                    </div>
                </div>
                <!-- <div class="keep_list" style="width: 100%;height: auto;" >
                    <div class="keep_item" style="width: 100%;height: auto;align-items: flex-start">
                        <span>维修保养费用:</span>
                        <div style="width: 650px; height: auto">
                            <div class="item_tag">
                                <el-tabs v-model="activeName" style="width: 100%;">
                                    <el-tab-pane v-for="(item,index) in payList" :label="item.name +'('+ payNumList[index] + '元' +')'" :name="item.code" :key="index">
                                        <div style="width: 100%; display: flex;justify-content: space-between;align-items: center">
                                            <div>
                                                <span>计费方式:</span>
                                                <span v-if="numMap[index].length > 0">明细汇总</span>
                                                <span v-else>人工汇总</span>
                                            </div>
                                        </div>
                                        <div style="margin-top: 10px">
                                            <div v-if="numMap[index].length > 0">
                                                <div v-if="numMap[index].length>0" class="table" style="width: 100%; height: auto">
                                                    <p style="width: 100%; display: flex; justify-content: space-between" align="center">
                                                        <span v-for="(val,i) in payList[index].details" :key="i" :style="{width:(100/(payList[index].details.length))+ '%'}">{{val}}</span>
                                                    </p>
                                                    <ul  style="width: 100%; list-style: none;margin-top: 10px">
                                                        <li  v-for="(arr,j) in numMap[index]" :key="j" style="width: 100%; display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px">
                                                            <span v-for="(s,x) in arr" :key="x" style="display: flex;justify-content: center;align-items: center" :style="{width:(100/(arr.length)) + '%'}">
                                                                {{numMap[index][j][x]}}
                                                            </span>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div v-else>
                                                <span>费用金额:{{payNumList[index]}}元</span>
                                            </div>
                                        </div>
                                    </el-tab-pane>
                                </el-tabs>
                            </div>
                            <p>
                                <span >合计:</span>
                                <span>{{payTotal}}元</span>
                            </p>
                        </div>
                    </div>
                </div> -->
                <div class="keep_list" style="width: 100%;height:auto" >
                    <div class="keep_item" style="width: 100%;height: auto;align-items: flex-start">
                        <span>维修保养说明:</span>
                        <div style="width: 650px; height: auto">
                            <p>
                                {{maintainRemark}}
                            </p>
                        </div>
                    </div>
                </div>
                <div class="keep_list" style="width: 100%;height: auto; margin-top: 15px" >
                    <div class="keep_item" style="width: 100%;height: auto;align-items: flex-start">
                        <span>维修保养过程:</span>
                        <div style="width: 650px; height: auto">
                            <ul class="ulbox">
                                <li v-for="(item,index) in fileList" :key="index" class="libox">
                                    <el-image :src="item" style="display:block;width:150px;height:150px;" v-if="(item).includes('jpg') || (item).includes('png') || (item).includes('jpeg')" :preview-src-list="[item]" ></el-image>
                                    <video :src="item" v-if="(item).includes('mp4')" controls="controls"></video>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="keep" v-if="isAdd">
                <div class="title">
                    <h2>
                        <span class="bc"></span>
                        <span>设备信息</span>
                    </h2>
                </div>
                <div class="keep_list">
                    <div class="keep_item">
                        <span class="tip">*</span>
                        <span>维修保养设备:</span>
                        <Select v-model="machId" style="width:250px;" placeholder="请选择维保设备">
                            <Option v-for="item in machList" :value="item.machId" :key="item.machId">{{item.machTypeName}}-{{item.machCode}}</Option>
                        </Select>
                    </div>
                </div>
                <div class="title">
                    <h2 style="position: relative">
                        <span class="bc"></span>
                        <span class="tip" style="color: red; position: absolute;top:-2px;left: 10px">*</span>
                        <span>工作数据</span>
                    </h2>
                </div>
                <div class="keep_list">
                    <div class="keep_item">
                        <span>工作里程:</span>
                        <Input v-model="workMile" placeholder="请输入工作里程" style="width: 230px;" clearable />
                        <span style="width: 20px;text-align: center">km</span>
                    </div>
                    <div class="keep_item">
                        <span>工作小时:</span>
                        <Input v-model="workHour" placeholder="请输入工作小时" style="width: 230px;" clearable />
                        <span style="width: 20px;text-align: center">h</span>
                    </div>
                </div>
                <div class="title">
                    <h2>
                        <span class="bc"></span>
                        <span class="tip">*</span>
                        <span>维修保养信息</span>
                    </h2>
                </div>
                 <div class="keep_list">
                    <div class="keep_item">
                        <span class="tip">*</span>
                        <span>维修保养日期:</span>
                        <DatePicker transfer type="date" placeholder="请选择日期" style="width: 250px" format="yyyy-MM-dd"  :options = "options"  v-model="maintainDate" :clearable="false"></DatePicker>
                         </div>
                </div>
                <div class="keep_tag">
                    <span class="tip">*</span>
                    <span>维修保养项目:</span>
                    <div class="item_tag">
                        <el-checkbox-group v-model="checkedItemList" >
                            <el-checkbox v-for="(item,index) in itemList" :label="item.id" :key="index" style="width: 100px;">{{item.name}}</el-checkbox>
                        </el-checkbox-group>
                    </div>
                </div>
                <!-- <div class="keep_tag">
                    <span class="tip">*</span>
                    <span>维修保养费用:</span>
                    <div class="item_tag">
                        <el-tabs v-model="activeName" style="width: 100%;">
                        <el-tab-pane v-for="(item,index) in payList" :label="item.name +'('+ payNumList[index] + '元' +')'" :name="item.code" :key="index">
                            <div style="width: 100%; display: flex;justify-content: space-between;align-items: center">
                                <div>
                                    <span>计费方式:</span>
                                    <el-radio v-model="radio" label="1" v-if="item.flag">明细汇总</el-radio>
                                    <el-radio v-model="radio" label="2">人工汇总</el-radio>
                                </div>
                                <el-button type="primary" size="mini" plain v-if="item.flag&&radio == 1" @click="addRemark(index)">添加明细</el-button>
                            </div>
                            <div style="margin-top: 10px">
                                <div v-if="radio == 1">
                                    <div v-if="numMap[index].length>0" class="table" style="width: 100%; height: auto">
                                        <p style="width: 100%; display: flex; justify-content: space-between" align="center">
                                            <span v-for="(val,i) in payList[index].details" :key="i" :style="{width:(100/(payList[index].details.length +1))+ '%'}">{{val}}</span>
                                            <span :style="{width:(100/(payList[index].details.length +1)) + '%'}">操作</span>
                                        </p>
                                        <ul  style="width: 100%; list-style: none;margin-top: 10px">
                                            <li  v-for="(arr,j) in numMap[index]" :key="j" style="width: 100%; display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px">
                                                <span v-for="(s,x) in arr" :key="x" style="display: flex;justify-content: center;align-items: center" :style="{width:(100/(arr.length +1)) + '%'}">
                                                    <Input v-model="numMap[index][j][x]" placeholder="请输入" style="width: 60px;" :disabled="x == arr.length-2" @on-change="changeInput" clearable />
                                                </span>
                                                <span style="color: red;cursor: pointer;text-align: center" :style="{width:(100/(arr.length +1)) +'%'}" @click="removeRemark(index,j)">删除</span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div v-if="radio == 2">
                                    <el-input-number v-model="payNumList[index]" controls-position="right"   :min="0" :max="999999999" style="width: 120px;"></el-input-number>元
                                </div>
                            </div>
                        </el-tab-pane>
                        </el-tabs>
                    </div>
                </div> -->
                <div class="keep_tag">
                    <span class="tip">*</span>
                    <span>维修保养说明:</span>
                    <el-input
                        type="textarea"
                        :rows="2"
                        maxlength="200"
                        placeholder="请输入维修保养说明"
                        v-model="maintainRemark" style="width: 650px;">
                    </el-input>
                </div>
                <div class="keep_tag">
                    <span class="tip">*</span>
                    <span>维修保养过程:</span>
                    <el-upload
                        class="upload-demo"
                        :action="uploadUrl"
                        :data="docData"
                        :before-upload="beforeFile"
                        :on-success="docSuccess"
                        :on-error="docError"
                        :on-progress="doProgress"
                        :show-file-list="false"
                        multiple
                        :limit="15"
                        style="margin-left:10px;width:100%" >
                        <el-button style="width:100%" :disabled="percentage != 0" type="primary" >支持格式：图片、视频<i class="el-icon-upload el-icon--right"></i></el-button>
                    </el-upload>
                </div>
                <el-progress v-if="percentage != 0"   :show-text="true" :text-inside="true" :stroke-width="15" :percentage="percentage" status="success" :format="format"></el-progress>
                <div class="keep_list" style="width: 100%;height: auto;margin-top:15px" >
                    <div class="keep_item" style="width: 100%;height: auto;align-items: flex-start">
                        <span></span>
                        <div style="width: 650px; height: auto">
                            <ul class="ulbox">
                                <li v-for="(item,index) in fileList" :key="index" class="libox" >
                                    <i class="el-icon-circle-close" @click="removeFile(item,index)"></i>
                                    <el-image :src="item" style="display:block;width:150px;height:150px;" v-if="(item).includes('jpg') || (item).includes('png') || (item).includes('jpeg')" :preview-src-list="[item]" ></el-image>
                                    <video :src="item" v-if="(item).includes('mp4')" controls="controls"></video>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="cancel(2)" type="info" size="small" plain v-if="isAdd">取消</el-button>
                <el-button @click="submitAll" type="primary" size="small" plain v-preventReClick="1500" v-if="isAdd">确定</el-button>
            </div>
        </Modal>

        <Modal v-model="exportModal" title="导出" width="500px;" :mask-closable="false" class-name='addModal' :footer-hide="true">
            <div style="margin:20px auto;text-align: center;">
                <img src="../../assets/images/common/succes-iocn.png" style="width: 60px;height: 60px;display: block;margin: auto">
            </div>
            <div style="margin:20px auto;text-align: center;">导出任务已创建！</div>
            <div style="margin:20px auto;text-align: center;display: flex;justify-content: center;align-items: center;">
                <p>系统正在处理，请稍后到</p>
                <router-link to="/exp/list">导出记录</router-link>
                <p>下载。</p>
            </div>
        </Modal>
    </div>
</template>

<script>
import {format,initFirstData,initLastData} from "@/sever/utils.js";
import {machSysInit} from '@/mixins/machSys'
import {
    getMachmaintainList,
    getMachmaintainDetail,
    getMachmaintainDel,
    getMachmaintainExp,
    getMachmaintainUpload,
} from '@/api/keep'

export default {
    mixins: [ machSysInit ],
    data() {
        return {
            options: {
                disabledDate(date) {
                    return date > Date.now();
                }
            },
            deptId: "",
            current: 1,
            pageSize: 10,
            pageNum: 1,
            totalCount: 0,
            list: [],
            startDate: '',
            endDate: '',
            value: [],
            keyword: '',
            maintainId: "",
            delModal: false,
            detailsModal:false,
            machId: "",
            machCode: "",
            machTypeName: "",
            checkedItemList: [],
            payTotal: '',
            maintainUserName: '',
            maintainDate: '',
            workMile: '',
            workHour: '',
            maintainRemark: '',
            addModal:false,
            updateModal:false,
            imgList:[],
            isAdd:false,
            itemPrjList:[],
            date:"",
            exportModal: false,
            btnList:[],
            itemPayList:[]
        }
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.pageNum = 1;
                this.current = 1;
                this.startDate = initFirstData();
                this.endDate =initLastData();
                this.value =[this.startDate,this.endDate];
                this.getMachList();
                this.getDateList('maintain_item');
                this.getDateList('maintain_pay');
            }
        }
    },
    methods: {
        format() {
            return this.percentText + " " + this.percentage + "%";
        },
        transformList(arr){
            let list = []
            for(let i =0 ;i < this.payList.length;i++){
                list[i] = 0;
            }
            for(let i =0 ;i < this.payList.length;i++){
                for(let j = 0; j <arr.length;j++){
                    if(this.payList[i].name == arr[j].payName) {
                        list[i] = arr[j].payValue;
                    }
                }
            }
            return list;
        },
        getAllList() {
            let params = {
                deptId: this.deptId,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                startDate: this.startDate,
                endDate: this.endDate,
                keyword: this.keyword,
            }
            getMachmaintainList(params).then(res => {
                if (res.code == 200) {
                    this.list = res.data.list;
                    for(let i = 0; i<this.list.length; i++){
                        this.list[i].payList = this.transformList(this.list[i].payList)
                    }
                    this.totalCount = res.data.total;
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error => {
                console.log(error)
            })
        },
        addRow(){
            this.machId = '';
            this.maintainDate ="";
            this.workMile ="";
            this.workHour ='';
            this.checkedItemList =[];
            this.activeName = "0";
            for(let i = 0; i<this.payList.length; i++){
                this.payNumList[i] = 0;
                this.numMap[i] = [];
            }
            this.maintainRemark = '';
            this.fileList =[];
            this.addModal = true;
        },
        onSecach() {
            this.getAllList();
        },
        handleClick() {
            var formdata = new FormData();
            formdata.append("deptId", this.deptId);
            formdata.append("startDate", this.startDate);
            formdata.append("endDate", this.endDate);
            formdata.append("keyword", this.keyword);
            let config = {
                headers: { "Content-Type": "multipart/form-data" }
                // headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
            };
            getMachmaintainExp(formdata,config).then(res=>{
                if(res.code == 200) {
                    this.exportModal = true;
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        goEXP() {
            this.$router.push({path: "/exp/list"});
        },
        getDate(value) {
            this.value = value;
            this.startDate = value[0];
            this.endDate = value[1];
            this.getAllList()
        },
        pageChange(val) {
            this.pageNum = val;
            this.getAllList()
        },
        edit_btn(){

            this.isAdd = true;
        },
        details(){
            this.activeName ='0';
            this.fileList =[];
            this.checkedItemList =[];
            this.isAdd = false;
            let params = {
                maintainId: this.maintainId,
            }
            getMachmaintainDetail(params).then(res=>{
                if(res.code == 200) {
                    this.machId = res.data.machId;
                    this.machCode = res.data.machCode;
                    this.machTypeName = res.data.machTypeName;
                    res.data.itemList.forEach(i=>{
                        this.checkedItemList.push(i.itemId)
                    })
                    this.itemPrjList = res.data.itemList;
                    this.itemPayList = res.data.payList
                    this.payList.forEach((i,index)=>{
                        this.payNumList[index]= 0;
                    })
                    for(let i = 0 ;i <this.payList.length; i++) {
                        for(let j = 0; j <this.itemPayList.length; j++){
                            if(this.payList[i].name == this.itemPayList[j].payName){
                                this.payNumList[i] = this.itemPayList[j].payValue;
                                if(this.itemPayList[j].detail && this.itemPayList[j].detail != ''){
                                    this.numMap[i] = JSON.parse(this.itemPayList[i].detail)
                                } else {
                                    this.numMap[i] = [];
                                }
                            }
                        }
                    }
                    this.$forceUpdate();
                    this.payTotal = res.data.payTotal;
                    this.maintainUserName = res.data.maintainUserName;
                    this.maintainDate = res.data.maintainDate;
                    this.date = JSON.parse(JSON.stringify(res.data.maintainDate))
                    this.workMile = res.data.workMile;
                    this.workHour = res.data.workHour;
                    this.maintainRemark = res.data.maintainRemark;
                    this.fileList = res.data.fileList;
                    // res.data.fileList.forEach(i=>{
                    //     let obj = {
                    //         url:i
                    //     }
                    //     this.fileList.push(obj)
                    // })
                    this.detailsModal = true;
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },

        getDetails(index, rows) {
            this.maintainId = rows[index].maintainId;
            this.detailsModal = true;
            this.details();
        },
        removeRow(index, rows) {
            this.maintainId = rows[index].maintainId;
            this.delModal = true;
        },
        del() {
            getMachmaintainDel(this.maintainId).then(res => {
                if (res.code == 200) {
                    this.$Message.success("操作成功");
                    this.delModal = false;
                    this.getAllList();
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error => {
                console.log(error)
            })
        },

        cancel(type) {
            if (type == 0) {
                this.delModal = false
            } else if(type == 1) {
                this.addModal = false;
            } else if (type == 2) {
                this.isAdd = false;
            }
        }
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.startDate = initFirstData();
        this.endDate =initLastData();
        this.value =[this.startDate,this.endDate];
        this.btnList = JSON.parse(localStorage.getItem("arr"));
        // this.getAllList();
        this.getMachList();
        this.getDateList('maintain_item');
        this.getDateList('maintain_pay');
    }
}
</script>

<style scoped lang="less">
@import "./../../assets/style/themeBase.less";
@import "./../../assets/style/modal.less";
</style>

<style scoped lang="scss">
.mainContent {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #F5F5F5;
    .search {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 10px;
        background:#fff;
        padding: 20px;
        box-sizing: border-box;
        &.searchBox{
            justify-content: flex-start;
            flex-wrap: wrap;
            padding: 0 20px 15px;
            .list{
                margin-right: 50px;
                span{
                    &:first-of-type{
                        color: #373D41;
                        font-family: MicrosoftYaHeiLight;
                    }
                }

            }
        }
        .left{
            width: 50%;
            /deep/ .ivu-tabs-bar{
                width: 100%;
                margin: 0 auto;
                border: none;
            }
            /deep/ .ivu-tabs-tab{
                padding-bottom: 20px;
                box-sizing: border-box;
            }
        }
        .right{
            margin-top: -20px;
        }
        .list{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-right: 20px;
            margin-top: 20px;
            span{
                width: 100px;
                text-align: right;
            }
            .ulbox1{
                list-style: none;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin-right: 20px;
                .libox1{
                    width: 50px;
                    height: 32px;
                    text-align: center;
                    line-height: 32px;
                    color: var(--themeColor);
                    cursor: pointer;
                    border: 1px solid var(--themeColor);
                }
                li:first-child{
                    border-radius: 16px 0  0 16px;
                }
                li:last-child{
                    border-radius: 0 16px  16px 0;
                }
                .active{
                    background: var(--themeColor);
                    color: #fff;
                    border: none;
                }
            }
        }
    }
    .tabBox{
        width:100%;
        margin-top: 10px;
        padding: 20px;
        background-color: #fff;
        border-radius: 10px;
        box-sizing: border-box;
        .tableList{
            width: 100%;
            /deep/ .el-table{
                color: #181818;
                font-family: MicrosoftYaHei;
                font-size: 14px;
                td,
                th.is-leaf{
                    border-bottom: none;
                }
                tr{
                    border: none;
                }
                thead th{
                    color: #666666;
                    font-weight: 400;
                }
            }
            /deep/ .el-table__row{
                background-color: #fff;
                cursor: pointer;
            }
            /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td{
                background-color: #F3F6FD ;
                cursor: pointer;
            }
        }
    }
}
.radiusBorder{
    >>>.ivu-input{
        border-radius: 16px 0 0 16px;
        background: #EBF2F8;
        border-color:#EBF2F8 ;
    }
}
>>>.ivu-input-search{
    border-radius: 0 16px 16px 0;
}
/deep/ .el-upload-list--picture {
        display: flex!important;
        flex-wrap: wrap!important;
       .el-upload-list__item{
           width: 90px !important;
           margin-right: 15px !important;
           .el-upload-list__item-name{
               display: none;
           }
       }
    }
/*去除upload组件过渡效果*/
>>>.el-upload-list__item { transition: none !important; }
>>>.el-upload{
    width: 100% !important;
}
>>>.el-button:focus, >>>.el-button:hover {
    color: var(--themeColor);
    border-color: var(--themeColor1);
    background-color: var(--themeColor2);
}
</style>
